import {Component} from 'react';
import React from 'react';
import {connect} from 'umi';
import APIS from '@/apis';
import {Button, Divider, Form, Input, Popconfirm, Space, Switch, Table, Modal} from 'antd';
import {FormInstance} from "antd/es/form";
import {PlusOutlined} from '@ant-design/icons';

/*考核点管理页面*/
class CheckPointer extends Component<any, any> {
  actionRef: any;
  state = {
    allPointer: [],
    filter: 0,
    modalVisible: false,
    addPointer: false,
    startTime: "",
    endTime: "",
    courseId: 0,
    trainId: 0,
    pointerId: 0
  }

  constructor(props: any) {
    super(props);
  }

  form: FormInstance | undefined;

  componentDidMount() {
    let id = this.getId();
    this.setState({trainId: id});
    APIS.ExamAPI.GetCheckPointerList({id: id}).then((resp) => {
      this.setState({allPointer: resp});
    }).catch(e => console.error(e))
  }

  getId() {
    let params = new URLSearchParams(this.props.history.location.search);
    let id = 0;
    if (params.has("id")) {
      // @ts-ignore
      id = parseInt(params.get("id"));
    }
    return id;
  }

  refresh = () => {
    APIS.ExamAPI.GetCheckPointerList({id: this.state.trainId}).then((resp) => {
      this.setState({allPointer: resp});
      console.log(resp)
    }).catch(e => console.error(e))
  }

  onCourseSelectChange(e: any, info: any) {
    const id = parseInt(info.key);
    this.setState({courseId: id});
  }

  clomns: any = [
    {
      title: '名称',
      dataIndex: 'title',
    },
    {
      title: '描述',
      dataIndex: 'description',
      valueType: 'textarea',
    },
    {
      title: '分数',
      dataIndex: 'score',
      valueType: 'textarea',
    },
    {
      title: '状态',
      dataIndex: 'state',
      render: (record: any, e: any) => {
        return <Switch checked={record === 1} onChange={this.onStateChange.bind(this, e)}/>
      }
    },
    {
      title: '操作',
      dataIndex: 'action',
      render: (e: any, record: any) => {
        return <div>
          <a type={"primary"} onClick={this.onEditCheckPointer.bind(this, record)}>编辑</a>
          <Divider type="vertical"/>
          <Popconfirm title={"确认删除改考核点?"} onConfirm={() => {
            APIS.ExamAPI.DeleteCheckPointer({id: record.id}).then((resp) => {
              if (resp.code === 10000) {
                this.refresh();
              }
            }).catch(e => console.error(e))
          }}>
            <a type="primary">删除</a>
          </Popconfirm>
        </div>
      }
    }
  ];

  onStateChange(e: any) {
    console.log(e)
    let temp = e.state === 1 ? 0 : 1;
    APIS.ExamAPI.ChangeCheckPointerState({id: e.id, state: temp}).then((resp) => {
      if (resp.code === 10000) {
        this.refresh();
      }
    }).catch(e => console.error(e));
  }

  onEditCheckPointer(record: any) {
    this.setState({
      modalVisible: true,
      addPointer: false,
      courseId: record.courseId,
      pointerId: record.id
    });
    setTimeout(() => {
      this.form?.setFieldsValue({
        "title": record.title,
        "description": record.description,
        "score": record.score
      })
    }, 300)
  }

  render() {
    const {
      modalVisible, addPointer, trainId, allPointer, pointerId
    } = this.state;
    return (
      <div key={"back"} style={{background: "white"}}>
        <div key={"top"} style={{marginTop: 20}}>
          <Button style={{float: "right", marginTop: 10, marginBottom: 10}} type="primary" key={"click"}
                  onClick={() => {
                    this.setState({modalVisible: true, addPointer: true, startTime: ""});
                  }}>
            <PlusOutlined/> 新增考核点
          </Button>
        </div>
        <Table key={"table"} columns={this.clomns} dataSource={allPointer} pagination={false}>

        </Table>
        {/* <HighPerformTable<any>
          columns={this.clomns}
          requestGetData={this.requestGetData.bind(this)}
          ref={(ref) => (this.actionRef = ref)}
          handleChangeState={(data, state) => {
            return APIS.ExamAPI.ChangeTrainingState({id: data.id, state: state === true ? 1 : 0})
          }}
          handleDelete={(record: any) => {
            return APIS.ExamAPI.DeleteTraining({id: record.id})
          }}
          onClickUpdate={record => {

          }}
          toolBarRender={() => [
            <Button type="primary" key={"click"} onClick={() => {
              this.setState({modalVisible: true, addPointer: true, startTime: ""});
            }}>
              <PlusOutlined/> 新增考核点
            </Button>,
          ]}
        />*/}
        <Modal
          key={"modal"}
          title={addPointer ? "新建考核点" : "编辑考核点"}
          visible={modalVisible}
          destroyOnClose={true}
          maskClosable={false}
          bodyStyle={{height: 400}}
          onCancel={() => this.setState({modalVisible: false})}
          footer={null}
        >
          <Form
            ref={(ref: any) => {
              this.form = ref
            }}
            onFinish={(value) => {
              if (addPointer) {
                APIS.ExamAPI.CreateNewCheckPointer({
                  title: value.title,
                  trainId: trainId,
                  score: parseInt(value.score),
                  description: value.description,
                  state: 1
                }).then((resp) => {
                  if (resp.code === 10000) {
                    this.setState({modalVisible: false})
                    this.refresh();
                  }
                }).catch(e => console.error(e))
              } else {
                APIS.ExamAPI.UpdateCheckPointer({
                  title: value.title,
                  id: pointerId,
                  score: value.score,
                  trainId: trainId,
                  description: value.description,
                }).then((resp) => {
                  if (resp.code === 10000) {
                    this.setState({modalVisible: false})
                    this.refresh();
                  }
                }).catch(e => console.error(e))
              }
            }}
            onFinishFailed={(e) => console.error(e)}
          >
            <Form.Item label={"名称"} name={"title"} rules={[{required: true, message: '请输入名称'}]}>
              <Input/>
            </Form.Item>
            <Form.Item label={"描述"} name={"description"}>
              <Input/>
            </Form.Item>
            <Form.Item label={"分数"} name={"score"} rules={[{required: true, message: '请输入分数'}]}>
              <Input/>
            </Form.Item>

            <Form.Item style={{float: 'right'}}>
              <Space>
                <Button onClick={() => this.setState({modalVisible: false})}>取消</Button>
                <Button type='primary' htmlType='submit'>确定</Button>
              </Space>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    );
  }

}

export default connect()(CheckPointer);
